<!DOCTYPE html>
<!-- Copyright (C) 2020  Matthew "strager" Glazar -->
<!-- See end of file for extended copyright information. -->
<html>
  <head>
    <%- await include("../common-head.ejs.html") %>
    <title>quick-lint-js: try in your browser</title>
    <link href="../main.css" rel="stylesheet" />
    <style>
      /* Make #code-input and #shadow-code-input have the same size. */
      main {
        position: relative;
      }
      #code-input,
      #shadow-code-input {
        width: 100%;
        height: 20em;
      }

      /* Normalize #code-input and #shadow-code-input to have the internal layout. */
      #code-input,
      #shadow-code-input {
        border: 0;
        font-family: monospace;
        font-size: 1rem;
        line-height: 1em;
        margin: 0;
        overflow: auto;
        padding: 0;
        white-space: pre;
      }

      #code-input,
      #shadow-code-input {
        overflow: scroll;
        padding: 3px;
      }

      /* Show #shadow-code-input visually behind #code-input. */
      #code-input {
        background: transparent;
        position: relative;
        z-index: 2;
        outline: none;
      }
      #shadow-code-input,
      #shadow-code-input mark {
        color: transparent;
      }
      #shadow-code-input {
        z-index: 1;
        position: absolute;
      }

      #error-box {
        background-color: #252526;
        color: yellow;
        border: 1px solid #fff;
        padding: 5px;
        font-size: 0.8rem;
        max-width: 300px;
        z-index: 999999;
      }

      #shadow-code-input {
        background-color: rgba(0, 0, 0, 0.05);
      }

      footer {
        border-top: 0;
      }

      @media (prefers-color-scheme: dark) {
        #code-input {
          color: white;
        }

        #shadow-code-input {
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    </style>
  </head>
  <body class="side-bar-nav">
    <!--
    Known bugs:

    * Empty marks (indicating missing semicolons) are practically invisible
      on Chrome due to its thick underline.
    * Overscrolling on macOS has visual issues.
    * Scrolling in general works poorly when sub-pixel scrolling (e.g. when
      zoomed in).
    * Scrolling horizontally sometimes doesn't scroll the highlights.
    * Browser text search finds text in the shadow code input in addition to
      text in the user code input.

    -->

    <header>
      <h1><a href="../">quick-lint-js</a></h1>
      <p class="tag-line">quick-lint-js finds bugs in JavaScript programs.</p>
      <%- await include("../common-nav.ejs.html") %>
    </header>

    <main>
      <h2>Demo</h2>

      <p>
        See how quick-lint-js works right here in your browser! Paste your
        favorite buggy JavaScript code below:
      </p>

      <pre id="shadow-code-input"></pre>
      <textarea id="code-input" spellcheck="false">
const occupation = language + " coder";
const language = "JavaScript";
occupation = "Senior " + occupation;

console.log(`Welcome, ${ocupation}!`);
</textarea
      >

      <script src="demo.bundled.js"></script>
    </main>

    <footer><%- await include("../common-footer-nav.ejs.html") %></footer>
  </body>
</html>

<!--
quick-lint-js finds bugs in JavaScript programs.
Copyright (C) 2020  Matthew "strager" Glazar

This file is part of quick-lint-js.

quick-lint-js is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

quick-lint-js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
-->
